<template>
	<view>
		<view class="m-search-view">
			<view class="m-search" @click="to_link('/pages2/shop-search/shop-search')">
				<image src="@/static/shop/icon-search.png" mode=""></image>
				<text>输入关键字搜索</text>
			</view>
		</view>
		<view class="m-row">
			<view class="m-left">
				<scroll-view :scroll-y="true" >
					<view class="m-list">
						<view class="m-item" :class="{'m-item-active':current == index}" @click="selectedFun(item,index)" v-for="(item,index) in list" :key="index">
							<text>{{item.title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="m-right">
				<scroll-view :scroll-y="true" >
					<view class="m-right-view">
						<view class="m-title">
							<text>{{itemList.title}}</text>
						</view>
						<view class="m-list">
							<view class="m-item" v-for="(item,index) in itemList.channels" :key="index" @click="to_link('/pages2/shop-list/shop-list?channel_id='+item.channel_id)">
								<view class="m-item-image">
									<image :src="item.originalPic" mode="aspectFill"></image>
								</view>
								<view class="m-item-title u-line-1">
									<text>{{item.title}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="m-cart">
			<view class="m-cart-view" @click="to_link('/pages2/shop-cart/shop-cart')">
				<u-badge type="error" :count="carCount" :offset="[5,5]"></u-badge>
				<image src="@/static/shop/shop-fixed-cart.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carCount:0,
				current:0,
				list:[],
				itemList:{}
			}
		},
		onLoad() {
			this.getDataFun()
		},
		onShow() {
			this.getCarFun()
		},
		methods: {
			selectedFun(item,index){
				if(this.current == index) return false;
				this.current = index
				this.itemList = item
			},
			getCarFun(){
				this.$http.getJson('gouwuche_lists').then(res=>{
					if(res.code == 1){
						let count = 0
						if (res.data.length > 0) {
							res.data.forEach(item=>{
								count += Number(item.num)
							})
						} 
						this.carCount = count
					}
				})
			},
			getDataFun(){
				this.$http.getJson('product_channel').then(res=>{
					if(res.code == 1){
						this.list = res.data
						this.itemList = res.data[0]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.m-search-view{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 100rpx;
	.m-search{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 702rpx;
		height: 60rpx;
		background: #F6F6F6;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-size: 26rpx;
		color: #ADAAA5;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}
}
.m-row{
	display: flex;
	height: calc(100vh - 100rpx);
	width: 750rpx;
	.m-left{
		width:182rpx;
		height: 100%;
		background: #F6F6F6;
		scroll-view{
			width: 100%;
			height: 100%;
		}
		.m-item{
			width: 100%;
			height: 90rpx;
			padding: 0 10rpx;
			font-size: 26rpx;
			color: #34302D;
			text-align: center;
			line-height: 90rpx;
		}
		.m-item-active{
			position: relative;
			font-size: 30rpx;
			color: #34302D;
			font-weight: 800;
			background: #fff;
			&::before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 30rpx;
				background: #F10018;
			}
		}
	}
	
	.m-right{
		flex: 1;
		height: 100%;
		scroll-view{
			width: 100%;
			height: 100%;
		}
		.m-right-view{
			padding-left: 40rpx;
		}
		.m-title{
			font-size: 30rpx;
			color: #34302D;
			font-weight: 600;
			padding: 24rpx 0;
		}
		.m-list{
			display: flex;
			flex-wrap: wrap;
			.m-item{
				width: 120rpx;
				margin-right: 60rpx;
				margin-bottom: 30rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
				.m-item-image{
					width: 120rpx;
					height: 120rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.m-item-title{
					text-align: center;
					padding-top: 12rpx;
					font-size: 24rpx;
					color: #75706A;
				}
			}
		}
	}
}

.m-cart{
	position: fixed;
	right: 25rpx;
	bottom: 40rpx;
	width: 90rpx;
	height: 90rpx;
	background: linear-gradient(180deg, #E4C79B 0%, #D3A358 100%);
	box-shadow: 0rpx 8rpx 16rpx 1rpx rgba(211,163,88,0.3);
	border-radius: 50%;
	.m-cart-view{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	image{
		width: 48rpx;
		height: 48rpx;
	}
}
</style>
